<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :model="queryData" :inline="true" size="small">
            <el-form-item>
              <RadioGroup v-model="queryData.auditStatus" type="button" @on-change="auditStatusChange">
                <Radio label="0">待审核</Radio>
                <Radio label="1">审核通过</Radio>
                <Radio label="-1">审核未通过</Radio>
              </RadioGroup>
            </el-form-item>
            <el-form-item>
              <Input v-model="refNumber" type="textarea" :rows="1" style="width: 300px;" placeholder="订单号" />
            </el-form-item>
            <el-form-item>
              <Button type="primary" @click="list">搜索</Button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <div style="height: 100%;display: flex;">
          <Button v-has="70601" type="primary" @click="add">新增</Button>&nbsp;
          <Button v-has="70602" type="primary" @click="upload">导入</Button>
        </div>
        <Table :columns="table_header" border :data="table_body" :max-height="tableHeight">
          <template v-if="queryData.auditStatus=== '0'" slot="operation" slot-scope="{ row }">
            <Button type="text" shape="circle" @click="audit(row,true)">通过</Button>
            <Button type="text" shape="circle" @click="audit(row,false)">不通过</Button>
          </template>
        </Table>
      </el-main>
      <el-footer style="padding:0;background: #fff;">
        <div style="text-align: right; padding-top: 10px;">
          <Page show-sizer :page-size-opts="pageSizeOpts" :page-size="pageSize" :total="pageTotal" @on-page-size-change="onPageSizeChange" @on-change="onPageChange" />
        </div>
      </el-footer>
    </el-container>
    <Drawer v-model="openModal" :title="drawerTitle" width="40%" :mask-closable="false" :styles="styles">
      <Form :model="formData">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="订单号" label-position="top" required>
              <Input v-model="formData.number" placeholder="订单号" @on-blur="loadOrderInfo" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="客户" label-position="top">
              <Input v-model="orgOwnerName" disabled type="text" placeholder="客户" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="费用科目" label-position="top" required>
              <Select v-model="formData.chargeSubject" placeholder="如果没有可选项,请先新建费用科目">
                <Option v-for="(item, index) in chargeSubjectOptions" :key="index" :value="item.id" :label="item.name" />
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="费用分类" label-position="top" required>
              <Select v-model="formData.chargeType" placeholder="费用分类">
                <Option v-for="(item, index) in chargeTypes" :key="index" :value="item.key" :label="item.name" />
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="补录类型" label-position="top" required>
              <Select v-model="formData.supplementType" placeholder="补录类型">
                <Option v-for="(item, index) in SupplementTypes" :key="index" :value="item.key" :label="item.name" />
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="补录金额" label-position="top" required>
              <Input v-model="formData.amount" type="number" placeholder="补录金额" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="备注" label-position="top">
              <Input v-model="formData.remarks" type="textarea" :rows="4" placeholder="备注" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="openModal = false">取消</Button>
        <Button type="primary" @click="submit">确定</Button>
      </div>
    </Drawer>
    <Modal v-model="uploadModel" title="批量补录费用" footer-hide @on-cancel="uploadModel=false">
      <a
        href="../../../static/template/order_charge_supplement.xlsx"
        download="order_charge_supplement.xlsx"
      >下载模板</a>
      </br>
      <Upload :action="baseUrl" :on-success="uploadSuccess" with-credentials accept=".xlsx" :show-upload-list="false">
        <Button icon="ios-cloud-upload-outline">选择文件</Button>
      </Upload>
    </Modal>
  </div>
</template>
<script>
import request from '@/utils/request'
import config from '@/settings'
const BASE_URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  data() {
    return {
      baseUrl: BASE_URL + '/charge/charge-supplement/excel',
      drawerTitle: '新增',
      openModal: false,
      uploadModel: false,
      orgOwnerName: '',
      chargeTypes: [
        {
          key: 1,
          name: '应收'
        },
        {
          key: 2,
          name: '应付'
        }
      ],
      SupplementTypes: [
        {
          key: 1,
          name: '退款'
        },
        {
          key: 2,
          name: '扣款'
        }
      ],
      currencies: [
        { name: '美元', value: 'USD' },
        { name: '欧元', value: 'EUR' },
        { name: '人民币', value: 'CNY' },
        { name: '港币', value: 'HKD' },
        { name: '日元', value: 'JPY' },
        { name: '英镑', value: 'GBP' }
      ],
      formDataDefault: {
        number: '',
        chargeSubject: '',
        chargeType: '',
        supplementType: '',
        chargeCurrency: '',
        amount: 0,
        remarks: ''
      },
      formData: {
        number: '',
        chargeSubject: '',
        chargeType: '',
        supplementType: '',
        chargeCurrency: '',
        amount: 0,
        remarks: ''
      },
      table_header: [
        {
          title: '订单号',
          key: 'orderNumber'
        },
        {
          title: '客户',
          key: 'orgOwner'
        },
        {
          title: '金额',
          key: 'amount'
        },
        {
          title: '币种',
          key: 'currency'
        },
        {
          title: '费用类型',
          key: 'chargeType'
        },
        {
          title: '费用科目',
          key: 'chargeSubject'
        },
        {
          title: '补录类型',
          key: 'supplementType'
        },
        {
          title: '创建时间',
          key: 'at'
        },
        {
          title: '状态',
          key: 'auditStatus'
        },
        {
          title: '备注',
          key: 'remarks'
        },
        {
          title: '操作人',
          key: 'operator'
        },
        {
          title: '操作',
          slot: 'operation'
        }
      ],
      table_body: [

      ],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      queryData: {
        pageSize: 50,
        currentPage: 0,
        orderIds: [],
        auditStatus: '0'
      },
      refNumber: '',
      pageTotal: 0,
      pageSizeOpts: [50, 100],
      chargeSubjectOptions: []
    }
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 260
    },
    pageSize() {
      return this.pageSizeOpts[0]
    }
  },
  created() {
    this.list()
    this.loadChargeSubjectOptions()
  },
  mounted() {
  },
  methods: {
    list() {
      if (this.refNumber) {
        this.queryData.orderIds = this.refNumber.split(/\n|,|，/)
      } else {
        this.queryData.orderIds = []
      }
      request({
        url: 'charge/charge-supplement/query',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.table_body = res.data.records
            this.pageTotal = res.data.total
          }
        }
      })
    },
    auditStatusChange() {
      this.list()
    },
    submit() {
      request({
        url: 'charge/charge-order-supplement/add',
        method: 'post',
        data: this.formData
      }).then(res => {
        if (res.success) {
          this.list()
          this.openModal = false
        }
      })
    },
    loadOrderInfo() {
      if (!this.formData.number) {
        return
      }
      request({
        url: 'charge/supplement/order-info?orderId=' + this.formData.number,
        method: 'get'
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.orgOwnerName = res.data
          }
        }
      })
    },
    add() {
      this.copyProperty(this.formData, this.formDataDefault, false)
      // this.packingListTableBody = []
      // this.editable= true
      this.openModal = true
    },
    upload() {
      this.uploadModel = true
    },
    uploadSuccess(response) {
      if (!response.success) {
        this.$Modal.error({
          title: '错误',
          content: response.message,
          closable: true
        })
      } else {
        this.uploadModel = false
        this.$Modal.success({
          title: '成功',
          content: '批量补录费用成功',
          closable: true
        })
        this.list()
      }
    },
    copyProperty(to, from, allCopy) {
      for (const x in from) {
        if (!allCopy && !to.hasOwnProperty(x)) {
          continue
        }
        if (from[x] instanceof Array) {
          to[x] = from[x]
        } else if (from[x] instanceof Object) {
          this.copyProperty(to[x], from[x], allCopy)
        } else if (from[x] == null) {
          continue
        } else if (typeof (from[x]) === 'boolean') {
          to[x] = from[x] + ''
        } else {
          to[x] = from[x]
        }
      }
    },
    audit(row, passed) {
      const data = {
        ids: [row.id],
        audit: passed ? 1 : -1
      }
      request({
        url: 'charge/charge-supplement/audit',
        method: 'post',
        data: data
      }).then(res => {
        if (res.success) {
          this.list()
        }
      })
    },
    loadChargeSubjectOptions() {
      request({
        url: 'charge-subject/option',
        method: 'get'
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.chargeSubjectOptions = res.data
          }
        }
      })
    },
    onPageSizeChange(pageSize) {
      this.queryData.pageSize = pageSize
      this.list()
    },
    onPageChange(page) {
      this.queryData.currentPage = page
      this.list()
    }
  }
}
</script>
<style>
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
